<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
  </head>
  <body>
    <div style="width: 600px; height: 400px"></div>
  </body>
  <script>
    // 常用来分析数据随时间的变化趋势
    // x轴数据：['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    // y轴数据：[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600]
    var mEcharts = echarts.init(document.querySelector("div"));
    let xData = [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ];
    let yData = [
      3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600,
    ];
    let yData2 = [
      3001, 1800, 1900, 900, 800, 1700, 1400, 700, 900, 1000, 800, 1700,
    ];
    var option = {
      xAxis: {
        type: "category",
        data: xData,
        // 紧挨边缘(让数据不再有间隔，可以将点直接放在数轴上)
        boundaryGap:false
      },
      yAxis: {
        type: "value",
        //设置y轴值不从0开始
        // scale:true //(常用于几个数值挨得很近，不便分开，这个属性可以让y值不从0开始)
      },
      tooltip: {
        trigger: "item",
      },
      legend:{
        data:['康师傅','统一']
      },
      series: [
        {
          name: "康师傅",
          type: "line",
          // 堆叠图，两个图的stack后的数值一定要一样
          stack:'all',
          areaStyle:{},
          data: yData,
          markPoint: {
            data: [
              {
                type: "max",
                name: "最大值",
              },
              {
                type: "min",
                name: "最小值",
              },
            ],
          },
          markLine: {
            data: [
              {
                type: "average",
                name: "平均值",
              },
            ],
          },
          // 标注区间
          markArea: {
            data: [
              [
                {
                  xAxis: "1月",
                },
                {
                  xAxis: "2月",
                },
              ],
              [
                {
                  xAxis: "7月",
                },
                {
                  xAxis: "8月",
                },
              ],
            ],
          },
        // 保持线条的平滑
          smooth:true,
        // 设置线条的风格
        lineStyle:{
            color:'red',
            type:'dashed'
        },
        // 填充风格
        areaStyle:{
            color:'pink'
        }
        },
        {
            name:'统一',
            data:yData2,
            type:'line',
            smooth:true,
            // 堆叠图，两个图的stack后的数值一定要一样
            stack:"all",
            areaStyle:{}
        }
      ],
    };
    mEcharts.setOption(option);
  </script>
</html>
